<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <!-- 宫格组件 -->
    <uni-section title="功能列表" type="line" padding>
        <uni-grid :column="3" :show-border="false" :square="false" @change="change">
          <uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
            <view class="grid-item-box">
              <image class="image" :src="item.url" mode="aspectFill" />
              <text class="text">{{item.text}}</text>
              <view v-if="item.badge" class="grid-dot">
                <uni-badge :text="item.badge" :type="item.type" />
              </view>
            </view>
          </uni-grid-item>
        </uni-grid>
    </uni-section>

	</view>
    <view>
      <!-- 输入框示例 -->
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value=""
                          placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
      </uni-popup>
    </view>
</template>

<script  setup>

import {ref} from "vue";
import modal from "@/plugins/modal";
import {equipList} from "@/api/xcj/equip";


// 租户列表
const EquipList = ref({});
const current=ref(0);

const data= ref([{
    image: '/static/images/banner/banner01.jpg'
  },
  {
    image: '/static/images/banner/banner02.jpg'
  },
  {
    image: '/static/images/banner/banner03.jpg'
  }
]);

function changeGrid(e) {
  modal.showToast({
    title: '模块建设中',
    mask: false,
    icon:'loading',
    duration: 1000
  });
}
function  getEquipment(){
   equipList().then(res => {
     EquipList.value = res.data;
     // console.log(EquipList.value)
   })
}
function handleEquip(item) {
  // console.log(item);
  uni.navigateTo({
    url: '/pages/common/detail?id=' + item.id,
  });
}
getEquipment();
</script>

<style>
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
;
}
.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>
<script>
  export default {
      components: {},
      data() {
          return {
              type: 'center',
              msgType: 'success',
              messageText: '这是一条成功提示',
              value: '',

              dynamicList: [],
              list: [{
                      url: '/static/images/grid/c1.png',
                      text: '育儿文章',
                      badge: '0',
                      type: "primary",
                      idx: 0
                  },
                  {
                      url: '/static/images/grid/c2.png',
                      text: '宝妈监测',
                      type: "success",
                      idx: 1
                  },
                  {
                      url: '/static/images/grid/c3.png',
                      text: '建设中',
                      badge: '99',
                      type: "warning",
                      idx: 2
                  },
                  {
                      url: '/static/images/grid/c4.png',
                      text: '建设中',
                      badge: '2',
                      type: "error",
                      idx: 3
                  },
                  {
                      url: '/static/images/grid/c5.png',
                      text: '建设中',
                      idx: 4
                  },
                  {
                      url: '/static/images/grid/c6.png',
                      text: '建设中',
                      idx: 5
                  },
                  {
                      url: '/static/images/grid/c7.png',
                      text: '建设中',
                      idx: 6
                  },
                  {
                      url: '/static/images/grid/c8.png',
                      text: '建设中',
                      idx: 7
                  },
                  {
                      url: '/static/images/grid/c9.png',
                      text: '建设中',
                      idx: 8
                  }
              ]
          }
      },
      methods: {
          toggle(type) {
              this.type = type
              // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
              this.$refs.popup.open(type)
          },
          messageToggle(type) {
              this.msgType = type
              this.messageText = `这是一条${type}消息提示`
              this.$refs.message.open()
          },
          dialogToggle(type) {
              this.msgType = type
              this.$refs.alertDialog.open()
          },
          dialogConfirm() {
              console.log('点击确认')
              this.messageText = `点击确认了 ${this.msgType} 窗口`
              this.$refs.message.open()
          },
          dialogClose() {
              console.log('点击关闭')
          },
          dialogInputConfirm(val) {
              uni.showLoading({
                  title: '3秒后会关闭'
              })

              setTimeout(() => {
                  uni.hideLoading()
                  console.log(val)
                  this.value = val
                  // 关闭窗口后，恢复默认内容
                  this.$refs.inputDialog.close()
              }, 3000)
          },
          shareToggle() {
              this.$refs.share.open()
          },
          change(e) {
              let {
                  index
              } = e.detail
              this.list[index].badge && this.list[index].badge++

              let cond = this.list[index].idx+1;

              if(cond===1){
                uni.navigateTo({
                    url: "../pages_list2detail/list2detail-list/list2detail-list"
                })
              }

              if(cond===2){
                // this.$refs.inputDialog.open()
                uni.navigateTo({
                    url: "bbm/bbm"
                })
              }
          }
      }
  }
</script>
<style lang="scss">
  .image {
      width: 50rpx;
      height: 50rpx;
  }

  .text {
      font-size: 26rpx;
      margin-top: 10rpx;
  }

  .example-body {
      /* #ifndef APP-NVUE */
      // display: block;
      /* #endif */
  }

  .grid-dynamic-box {
      margin-bottom: 15px;
  }

  .grid-item-box {
      flex: 1;
      // position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
  }

  .grid-item-box-row {
      flex: 1;
      // position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
  }

  .grid-dot {
      position: absolute;
      top: 5px;
      right: 15px;
  }

  .swiper {
      height: 420px;
  }

  /* #ifdef H5 */
  @media screen and (min-width: 768px) and (max-width: 1425px) {
      .swiper {
          height: 630px;
      }
  }

  @media screen and (min-width: 1425px) {
      .swiper {
          height: 830px;
      }
  }

  /* #endif */
</style>
<style lang="scss">
  @mixin flex {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
  }

  @mixin height {
      /* #ifndef APP-NVUE */
      height: 100%;
      /* #endif */
      /* #ifdef APP-NVUE */
      flex: 1;
      /* #endif */
  }

  .box {
      @include flex;
  }

  .button {
      @include flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 35px;
      margin: 0 5px;
      border-radius: 5px;
  }

  .example-body {
      background-color: #fff;
      padding: 10px 0;
  }

  .button-text {
      color: #fff;
      font-size: 12px;
  }

  .popup-content {
      @include flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      height: 50px;
      background-color: #fff;
  }

  .popup-height {
      @include height;
      width: 200px;
  }

  .text {
      font-size: 12px;
      color: #333;
  }

  .popup-success {
      color: #fff;
      background-color: #e1f3d8;
  }

  .popup-warn {
      color: #fff;
      background-color: #faecd8;
  }

  .popup-error {
      color: #fff;
      background-color: #fde2e2;
  }

  .popup-info {
      color: #fff;
      background-color: #f2f6fc;
  }

  .success-text {
      color: #09bb07;
  }

  .warn-text {
      color: #e6a23c;
  }

  .error-text {
      color: #f56c6c;
  }

  .info-text {
      color: #909399;
  }

  .dialog,
  .share {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
  }

  .dialog-box {
      padding: 10px;
  }

  .dialog .button,
  .share .button {
      /* #ifndef APP-NVUE */
      width: 100%;
      /* #endif */
      margin: 0;
      margin-top: 10px;
      padding: 3px 0;
      flex: 1;
  }

  .dialog-text {
      font-size: 14px;
      color: #333;
  }
</style>

